<%@page import="multiface.web.util.Define"%>
<%@page import="multiface.promonet.jpa.Lavoro"%>
<%@page import="multiface.promonet.jpa.File"%>
<%@page import="multiface.promonet.jpa.Utente"%>
<%@page import="multiface.promonet.jpa.util.PersistenceManager"%>
<%@page import="java.util.List"%>
<%@page import="javax.persistence.Query"%>
<%@page import="javax.persistence.EntityManager"%>
<%@page import="javax.persistence.Persistence"%>
<%@page import="javax.persistence.EntityManagerFactory"%>
<%@page import="javax.persistence.EntityManagerFactory"%>
<%

    EntityManagerFactory emf = PersistenceManager.getInstance().getEntityManagerFactory();
    EntityManager em = emf.createEntityManager();
    Utente ps = (Utente) session.getAttribute(Define.USER_SESSION);
    Utente p = em.find(Utente.class, ps.getIdutente());


    String uids = p.getIdutente().toString();
    int uid = Integer.parseInt(uids);
    
    em.refresh(p);
    List<File> list = p.getFileList();
%>

<script type="text/javascript">
    $(document).ready(function() {
        $('#uploadify').uploadify({
            'uploader': 'engine/plugin/uploadify/uploadify.swf',
            'script': 'promoter/center/account/addFiles.jsp?uid=<%=uids%>',
            'folder': '/uploads',
            'cancelImg': 'engine/plugin/uploadify/cancel.png',
            'multi': true,
            'sizeLimit': 1048576*2,
            'auto' :true,
            'onComplete'  : function(event, ID, fileObj, response, data) {
                
                $.post("promoter/center/account/append_image.jsp",{fid:jQuery.trim(response)},function(d){
                    $(".images").append(d);
                });
                //$(".images").append("<div id=\"file_"+jQuery.trim(response)+"\" onclick=\"javascript:del("+jQuery.trim(response)+")\"><img class=\"mouse\" src=\"GetImageServlet?th=y&fid="+jQuery.trim(response)+"\" height=\"96\" width=\"128\"></img></div>");
            }
        });
        
        $('#upload').click(function() {
            $('#uploadify').uploadifyUpload();
            return false;
        });
        
        $("a.photo").fancybox({
            'transitionIn' : 'none',
            'transitionOut':  'none',
            'titlePosition' 	: 'over',
            'overlayOpacity'    : '0.7',
            'overlayColor'      : '#000',
            'type' : 'image',
            'titleShow': true
        });
    });
    
    function del(fid){
        if(confirm('Eliminare la foto?')){
            $.post("ActionServlet", 
            { 
                fid:fid,
                action:'del_photo',
                section :'account'
            },
            function(data){ 
                location.href= "?page=account&where=photo";
            });
        }
    }
    function cover(fid){
        if(confirm('Impostare la foto come copertina del Lavoro?')){
            $.post("ActionServlet", 
            { 
                uid:<%=uids%>,
                fid:fid,
                action:'set_cover_photo',
                section: 'account'
            },
            function(data){ 
                location.href= "?page=account&where=photo";
            });
        }
    }
    
    function img_over(fid){
        $("#del_"+fid).show();
        $("#cover_"+fid).show();
    }
    function img_out(fid){
        $("#del_"+fid).hide();
        $("#cover_"+fid).hide();
    }
</script>
<style>
    .images{
        padding-top: 12px;
    }
    .img-single{
        float: left;
        width: 150px;
        margin-bottom: 12px;

    }
    .box-up{
        float: left;
        margin-top: 20px;
    }
    .mouse{

        border: 1px #ccc solid;
    }
    .mouse:hover{
        border: 1px red solid;

    }
    .img_cover{
        position: absolute;
        font-size: 16px;
        color: white;
        width: 128px;
        height: 24px;
        text-align: center;
        font-weight: bolder;
        margin-top: -24px;
        background-color: rgb(20,20,20); 
        opacity: 0.7;
        z-index: 100;
        margin-left: 11px;
    }
    .btn-img{
        width: 128px;
        height: 24px;
        margin-top: 2px;
        margin-left: 6px;
        font-size: 9px;
        font-style: italic;
    }
    .btn-img-del{
        background-color: #fff; 
        height: 16px;
        width: 50px;
        z-index: 100;
        float: left;
        cursor: pointer;
    }
    .btn-img-cov{
        background-color: #fff; 
        height: 16px;
        width: 70px;
        z-index: 100;
        float: left;
        margin-left: 4px;
        cursor: pointer;
    }
</style>
<div id="center">
    <div class="center-title">Informazioni Personali</div>
    <div class="images">
        <%
            for (File f : list) {
                em.refresh(f);
                if (f.getCopertina()) {
        %>
        <div class="img-single" id="file_<%=f.getIdfile()%>">
            <a rel="gruppo1" class="photo" href="GetImageServlet?fid=<%=f.getIdfile()%>"><img class="mouse" src="GetImageServlet?w=128&fid=<%=f.getIdfile()%>" height="96" width="128"></img></a>
            <p class="img_cover">COPERTINA</p>
            <div class="btn-img">
                <div class="btn-img-del" id="del_<%=f.getIdfile()%>" onclick="javascript:del(<%=f.getIdfile()%>)">
                    <img src="engine/img/btn/del.png" width="16" height="16" /> Elimina
                </div>
            </div>
        </div>
        <%
        } else {
        %>
        <div class="img-single" id="file_<%=f.getIdfile()%>">
            <a rel="gruppo1" class="photo" href="GetImageServlet?fid=<%=f.getIdfile()%>"><img class="mouse" src="GetImageServlet?w=128&fid=<%=f.getIdfile()%>" height="96" width="128"></img></a>
            <div class="btn-img">
                <div class="btn-img-del" id="del_<%=f.getIdfile()%>" onclick="javascript:del(<%=f.getIdfile()%>)">
                    <img src="engine/img/btn/del.png" width="16" height="16" /> Elimina
                </div>
                <div class="btn-img-cov" id="cover_<%=f.getIdfile()%>" onclick="javascript:cover(<%=f.getIdfile()%>)">
                    <img src="engine/img/btn/cover.png" width="16" height="16" /> Copertina
                </div>
            </div>
        </div>
        <%
                }
            }
        %>
    </div>
    <div class="box-up">
        <div style="float: left;width: 130px;"><input id="uploadify" type="file">
            <a id="upload"style="display: none" href="#">Upload</a>
        </div>
        <div style="float: left;width: 150px;">Usa il tasto CTRL per selezionare pi&ugrave immagini.</div>
    </div>
    <div class="box-prew" style="display: none" id="preview">
        <div class="title">Preview Image</div>
        <div id="image"></div>
    </div>
</div>
<%
    em.close();
%>


